<!--  -->
<template>
  <div class="qingwu">
    <div class="admin_main_block">
      <div class="admin_main_block_top">
        <div>
          <el-form ref="form" :inline="true" :model="form" label-width="130px">
            <el-row>
              <el-col :span="8">
                <el-form-item label="项目名称">
                  <el-input v-model="form.project_name" clearable />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="商户名称">
                  <el-input v-model="form.store_name" clearable />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="审核状态">
                  <el-select
                    v-model="form.project_verify"
                    clearable
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in checkList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="创建日期">
                  <el-date-picker
                    v-model="dates"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    type="daterange"
                    range-separator="-"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    :default-time="['00:00:00', '23:59:59']"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8" :offset="2">
                <el-form-item>
                  <el-button type="primary" @click="handleSearch"
                    >查询</el-button
                  >
                  <el-button type="primary" @click="handleReset('form')"
                    >重置</el-button
                  >
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
      <div class="admin_table_main">
        <el-table :data="tableData" class="tableData" style="width: 100%">
          <el-table-column prop="id" label="服务ID" />
          <el-table-column prop="sort" label="排序" />
          <el-table-column prop="project_name" label="项目名称" />
          <el-table-column prop="project_type" label="项目类型" />
          <el-table-column label="分类" prop="class_cn" />
          <el-table-column prop="store_name_cn" label="商户名称" />
          <el-table-column prop="project_settlement_price" label="结算价" />
          <el-table-column label="上架状态" prop="project_status">
            <template slot-scope="scope">
              <el-switch
                :disabled="scope.row.project_status == 0"
                v-model="scope.row.project_status"
                class="switchStyle"
                active-color="#13ce66"
                inactive-color="#eee"
                :active-value="1"
                :inactive-value="0"
                @click.native="changeStatus(scope.row.id)"
              />
            </template>
          </el-table-column>
          <el-table-column label="审核状态" prop="education_cn" />
          <el-table-column prop="provinceCity" label="预约价比例" />
          <el-table-column
            prop="position_cn"
            label="会员预约价比例"
            width="110px"
          />
          <el-table-column prop="provinceCity" label="原价" />
          <el-table-column prop="position_cn" label="销售价" />
          <el-table-column prop="provinceCity" label="会员价" />
          <el-table-column prop="position_cn" label="创建时间" />
          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                @click="
                  $router.push({
                    name: 'project_index',
                    params: { id: scope.row.id },
                  })
                "
                >审核</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="pagesCon">
          <div>
            <el-pagination
              :current-page="form.page"
              :page-sizes="page_sizes"
              :page-size="form.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="page_totals"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        project_verify: "",
        project_name: "",
        store_name: "",
        start_date: "",
        end_date: "",
        page: 1,
        pageSize: 10,
      },
      checkList: [], //审核状态
      dates: [],
      tableData: [{}],
      page_totals: 0,
      page_sizes: [10, 30, 50, 100],
    };
  },

  components: {},
  watch: {
    dates(val) {
      // console.log("val", val);
      this.form.start_date = val ? val[0] : "";
      this.form.end_date = val ? val[1] : "";
    },
  },
  mounted() {
    this.getList();
  },

  methods: {
    // 获取列表
    getList() {
      this.$post(this.$api.getProjectIndex, this.form).then((res) => {
        if (res.code == 200) {
          this.tableData = res.data.list;
          this.page_totals = res.data.total;
          this.checkList = res.data.checkStatusArray;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    // 查询
    handleSearch() {
      this.form.page = 1;
      this.getList(this.form);
    },
    // 重置
    handleReset(e) {
      this.form.project_verify = "";
      this.form.project_name = "";
      this.form.store_name = "";
      this.form.start_date = "";
      this.form.end_date = "";
      this.getList(this.form);
      // this.$refs[e].resetFields();
    },
    // 上下架状态
    changeStatus(id) {
      this.$post(this.$api.projectOffShelf, { id }).then((res) => {
        // console.log("res", res);
        if (res.code == 200) {
          this.$message.success("下架成功");
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    // 改变页面条数
    handleSizeChange(val) {
      this.form.pageSize = val;
      this.getList(this.form);
    },
    // 选择页数
    handleCurrentChange(val) {
      this.form.page = val;
      this.getList(this.form);
    },
  },
};
</script>
<style  scoped>
.pagesCon {
  text-align: right;
  margin-top: 20px;
}
</style>